<template>
  <div class="an-dialog">
    <el-dialog title="图片上传" v-model="dialogVisible" width="480px" :before-close="changeVisible">
      <el-tabs v-model="activeName">
        <el-tab-pane label="网络地址" name="first">
          <el-form ref="form" :model="form" label-width="0px">
            <el-form-item
              label
              prop="url"
              :rules="[
      { required: true, message: '请输入网络地址', trigger: 'blur' },
    ]"
            >
              <el-input v-model="form.url" placeholder="请输入网络地址"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="本地上传" name="second">暂不支持</el-tab-pane>
      </el-tabs>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="changeVisible">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
@Options({
  props: {
    isVisible: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:isVisible", "callBack"],
})
export default class dialogUplaod extends Vue {
  [x: string]: any;
  dialogVisible: Boolean = this.isVisible;
  activeName: string = "first";
  data() {
    return {
      form: {
        url:
          "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      },
    };
  }

  // 确定
  submit() {
    let el: any = this.$refs["form"];
    el.validate((valid: Boolean) => {
      if (valid) {
        this.$emit("callBack", this.form.url);
        this.changeVisible();
      }
    });
  }

  changeVisible() {
    this.dialogVisible = this.dialogVisible ? false : true;
    this.$emit("update:isVisible", this.dialogVisible);
  }
}
</script>

<style lang="scss">
.an-dialog {
  .el-dialog__body {
    padding-top: 0;
  }
}
</style>